<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册界面</title>

    <style>
        #contanier {
            border: 0px solid white;
            width: 1300px;
            margin: auto;
        }
        
        .error {
            font-size: 12px;
            color: red;
        }
        
        #top {
            border: 0px solid white;
            width: 100%;
            height: 50px;
        }
        
        #menu {
            border: 0px solid white;
            height: 40px;
            background-color: black;
            padding-top: 10px;
            margin-bottom: 15px;
            margin-top: 10px;
        }
        
        .top {
            border: 0px solid white;
            width: 405px;
            height: 100%;
            float: left;
            padding-left: 25px;
        }
        
        #top1 {
            padding-top: 15px;
        }
        
        #bottom {
            margin-top: 13px;
            text-align: center;
        }
        
        #form {
            height: 500px;
            padding-top: 70px;
            background-image: url(../img/regist_bg.jpg);
            margin-bottom: 10px;
        }
        
        a {
            text-decoration: none;
        }
        
        label.error {
            background: url(../img/unchecked.gif) no-repeat 10px 3px;
            padding-left: 30px;
            font-family: georgia;
            font-size: 15px;
            font-style: normal;
            color: red;
        }
        
        label.success {
            background: url(../img/checked.gif) no-repeat 10px 3px;
            padding-left: 30px;
        }
        
        #father {
            border: 0px solid white;
            padding-left: 307px;
        }
        
        #form2 {
            border: 5px solid gray;
            width: 660px;
            height: 450px;
        }
    </style>

</head>

<body>
    <div id="contanier">
        <div id="top">
            <div class="top">
                <img src="../img/logo.png" height="47px" />
            </div>
            <div class="top">
                <img src="../img/header.png" height="45px" />
            </div>
            <div class="top" id="top1">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </div>
        </div>
        <div id="menu">
            <a href="#">
                <font size="5" color="white">首页</font>
            </a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">
                <font color="white">电脑办公</font>
            </a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">
                <font color="white">手机数码</font>
            </a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">
                <font color="white">鞋靴箱包</font>
            </a>
        </div>
        <div id="form">
            <form action="#" method="get" id="registForm">
                <div id="father">
                    <div id="form2">
                        <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td colspan="2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER
                                </td>
                            </tr>
                            <tr>
                                <td width="180px">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                                    <label for="user">用户名</label>
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 密码
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="password" size="35px" id="password" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 确认密码
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Email
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 姓名
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 性别
                                </td>
                                <td>
                                    <span style="margin-right: 155px;">
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女<em></em>
                                </span>
                                    <label for="sex" class="error" style="display: none;"></label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 出生日期
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="submit" value="注      册" height="50px" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </form>
        </div>
        <div>
            <img src="../img/footer.jpg" width="100%" />
        </div>
        <div id="bottom">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">招贤纳士</a>
            <a href="#">法律声明</a>
            <a href="#">友情链接</a>
            <a href="#">支付方式</a>
            <a href="#">配送方式</a>
            <a href="#">服务声明</a>
            <a href="#">广告声明</a>
            <p>
                Copyright © 2009-2019 极客商城 版权所有
            </p>
        </div>
    </div>
</body>

</html>

<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../validate/jquery.validate.min.js"></script>
<script src="../validate/messages_zh.js"></script>
<script>
    $("#registForm").validate({
        rules: {
            "user": {
                required: true
            },
            "password": {
                required: true,
                minlength: 6
            },
            "repassword": {
                required: true,
                minlength: 6
            },
            "email": {
                required: true,
                email: true
            },
            "username": {
                required: true,
            },
            "sex": {
                required: true,
            },
            "birthday": {
                birthday: true
            },

        },
        messages: {
            "user": {
                required: "姓名必须填写！"
            },

            "password": {
                required: "密码必须填写",
                minlength: "密码最低六位"
            },
            "repassword": {
                required: "验证密码必须正确！",
            },
            "email": {
                required: "邮箱必须填写",
                email: "邮箱格式必须正确"
            },
            "username": {
                required: "姓名必须填写，且正确！"
            },
            "sex": {
                required: "性别必须合理！"
            },
            "birthday": {
                birthday: "生日格式必须正确!"
            },
        }
    });
</script>